<template>
  <div>
    <div>
      <Goback></Goback>
      <div class="detailBox">
        <h3>{{ list.title }}</h3>
        <div class="contentBox" v-html="list.content"></div>
      </div>
    </div>
    <!-- dibu -->
    <div class="background">
      <div class="footerBox">
        <div class="midBox">
          <div class="boxCollect" @click="collect" v-show="flag">
            收藏成功 &nbsp; <van-icon name="like" class="boxLike2" />
          </div>
          <div class="boxCollect" @click="collect" v-show="!flag">
            收藏 &nbsp; <van-icon name="like" class="boxLike" />
          </div>
          <div class="rightBox" @click="zan">
            <div class="zanBox" v-if="isClick == 0">
              点赞&nbsp;<van-icon name="good-job-o" />{{ num }}
            </div>
            <div class="zanBox" v-if="isClick == 1">
              点赞&nbsp;<van-icon name="good-job-o" />{{ num }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  newdetail,
  collectNew,
  collectNewList,
  getZan,
} from "../../../api/api";
import Goback from "./Goback";
export default {
  name: "Detail",
  components: {
    Goback,
  },
  data() {
    return {
      list: [],
      flag: false,
      arr: [],
      num: 0,
      isClick: "",
    };
  },
  methods: {
    collect() {
      if (this.$store.state.isLogin == true) {
        // 收藏或者取消收藏
        collectNew(this.$route.query.articleId).then((res) => {
          if (res.code == 0) {
            this.flag = !this.flag;
          }
        });
      } else {
        this.$notify({ type: "success", message: "请先登录" });
      }
    },
    // 点赞或者取消点赞
    zan() {
      if (this.$store.state.isLogin == true) {
        getZan(this.$route.query.articleId).then((res) => {
          if (res.code == 0) {
            if (this.isClick == 0) {
              this.isClick = 1;
              this.num = this.num + 1;
            } else {
              this.isClick = 0;
              this.num = this.num - 1;
            }
          }
        });
      } else {
        this.$notify({ type: "success", message: "请先登录" });
      }
    },
  },
  created() {
    // 判断是否收藏
    collectNewList().then((res) => {
      this.arr = res.rows;
      for (var i = 0; i < this.arr.length; i++) {
        if (this.$route.query.articleId == this.arr[i].articleId) {
          this.flag = true;
        }
      }
    });
    newdetail(this.$route.query.articleId).then((res) => {
      this.list = res.data;
    });
  },
};
</script>
    
<style scoped lang="less">
h3 {
  padding: 80px 20px 0 20px;
}

.detailBox {
  width: 100%;
  overflow: hidden;
  background-color: #e7f0fc;
  height: calc(100vh - 42px);
  overflow-y: scroll;
}

.contentBox {
  padding: 0 20px 50px 20px;
  margin-top: 10px;
  box-sizing: border-box;
}

/deep/ .contentBox img {
  width: 100%;
  height: 100%;
}

// dibu
.background {
  background-color: #e7f0fc;
  height: 40px;
  width: 100%;
  z-index: 999;
}

.footerBox {
  height: 40px;
  width: 100%;
  /*border: 1px solid #2b7b97;*/
  box-sizing: border-box;
  border-radius: 100px;
  position: fixed;
  bottom: 1px;
  background-color: #fcfcfc;
  /*overflow: hidden;*/
}
.boxLike {
  color: #409eff;
}
.boxLike2 {
  color: #ff6b81;
}

.zanBox2 i {
  color: #ff6b81;
}

.midBox {
  line-height: 40px;
  font-family: 华文新魏;
}

.midBox div {
  float: left;
}

.boxCollect {
  padding-left: 20px;
}

.rightBox {
  float: right !important;
  padding-right: 20px;
}

.numBox {
  font-size: 12px;
}

/deep/ .art_p {
  font-size: 14px;
  padding-top: 10px;
}
</style>